<!-- 播客主页/通用设置-账户和密码 -->
<template>
    <div class="common-layout">
        <el-text class="ac-pwd-title">
            账户和密码
        </el-text>
        <div class="option-group">

            <el-form ref="form" label-width="100px">
                <el-form-item label="用户名">
                    <el-text>{{ AccountForm.username }}</el-text>
                    <el-button type="primary" :icon="Edit" circle @click="toEditUsernameStatus"
                        style="width: 2em;height: 2em;margin-left: 1em;"></el-button>
                </el-form-item>
                <el-form-item label="用户头像">
                    <el-avatar shape="circle" :size="50" :src="imageFile"></el-avatar>
                    <el-button type="primary" :icon="Edit" circle @click="toEditAvaterStatus"
                        style="width: 2em;height: 2em;margin-left: 1em;"></el-button>
                </el-form-item>
                <el-form-item label="邮箱号">
                    <el-text>{{ AccountForm.email }}</el-text>
                    <!-- <el-button type="primary" :icon="Edit" circle @click="toEditEmailstatus"
                        style="width: 2em;height: 2em;margin-left: 1em;"></el-button> -->
                </el-form-item>
                <el-form-item label="密码">
                    <el-text>********</el-text>
                    <el-button type="primary" :icon="Edit" circle @click="toEditPassword"
                        style="width: 2em;height: 2em;margin-left: 1em;"></el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-dialog v-model="usernameStatus" title="修改用户名" width="500" class="setting-dialog">
            <el-form ref="form" :model="tempAccountForm" label-width="100px">
                <el-form-item label="用户名" prop="name" style="width: 400px;">
                    <el-input placeholder="请填写用户名" :maxLength="20" v-model="tempAccountForm.username"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmitUsername">确定</el-button>
                    <el-button @click="cancelUsername">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog v-model="avaterSrcStatus" title="修改用户头像" width="500" class="setting-dialog">
            <el-form ref="form" :model="tempAccountForm" label-width="100px">
                <el-form-item label="用户头像" prop="avaterSrc" style="width: 400px;">
                    <el-upload name="file" :show-file-list="false" :action="uploadUrl" :onSuccess="success"
                        :before-upload="beforeUpload" :data="{ userid: userid }">
                        <template #trigger>
                            <el-button size="small" type="primary">点击上传</el-button>
                        </template>
                        <template #tip>
                            <div class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="头像展示" prop="avatarFile">
                    <img :src="imageFile" style="width: 100px;" alt="图片预览" />
                </el-form-item>
                <!-- <el-form-item>
                    <el-button type="primary" @click="onSubmitAccountForm">关闭</el-button>
                    <el-button>取消</el-button>
                </el-form-item> -->
            </el-form>
        </el-dialog>

        <el-dialog v-model="emailStatus" title="修改邮箱号" width="500" class="setting-dialog">
            <el-form ref="form" :model="tempAccountForm" label-width="100px">
                <el-form-item label="邮箱号" prop="name" style="width: 400px;">
                    <el-input placeholder="请填写邮箱号" :maxLength="20" v-model="tempAccountForm.email"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmitPwd">确定</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog v-model="passwordStatus" title="修改密码" width="500px" class="setting-dialog">
            <el-form ref="formRef" :rules="rules" :model="tempChangePwd" label-width="100px">
                <el-form-item label="旧密码" prop="oldPwd" style="width: 400px;">
                    <el-input placeholder="请输入密码" type="password" show-password :maxLength="20"
                        v-model="tempChangePwd.oldPwd"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPwd" style="width: 400px;">
                    <el-input placeholder="请输入密码" type="password" show-password :maxLength="20"
                        v-model="tempChangePwd.newPwd"></el-input>
                </el-form-item>
                <el-form-item label="重复新密码" prop="newPwdp" style="width: 400px;">
                    <el-input placeholder="请输入密码" type="password" show-password :maxLength="20"
                        v-model="tempChangePwd.newPwdp"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmitPwd">确定</el-button>
                    <el-button @click="cancelPwd">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- <el-button plain @click="dialogTableVisible = true">
            Open a Table nested Dialog
        </el-button>
        <el-dialog v-model="dialogTableVisible" title="Shipping address" width="800">
            <el-table :data="gridData">
                <el-table-column property="date" label="Date" width="150" />
                <el-table-column property="name" label="Name" width="200" />
                <el-table-column property="address" label="Address" />
            </el-table>
        </el-dialog> -->
    </div>
</template>
<script lang="ts" setup>
import store from "@/store";
import request from "@/utils/request";
import { Edit } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { cloneDeep } from "lodash";
import { onMounted, ref } from "vue";

// 个人账户信息测试数据
const AccountForm = ref({
    username: '白日梦想家',
    email: '2662258652@qq.com',
    avaterSrc: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
})
// 修改个人信息的弹窗的显示状态
const usernameStatus = ref(false)
const emailStatus = ref(false)
const passwordStatus = ref(false)
const avaterSrcStatus = ref(false)
// 个人账户信息用于修改的中转对象
const tempAccountForm = ref({
    username: '白日梦想家',
    email: '2662258652@qq.com',
    avaterSrc: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'

})
// 个人账户用于修改密码的对象
const tempChangePwd = ref({
    oldPwd: '',
    newPwd: '',
    newPwdp: ''
})
const rules = {
    oldPwd: [
        { required: true, message: '请输入旧密码', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value === tempChangePwd.value.newPwd) {
                    callback(new Error('新密码不能与旧密码相同'))
                } else {
                    callback()
                }
            },
            trigger: 'blur'
        }
    ],
    newPwd: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value === tempChangePwd.value.oldPwd) {
                    callback(new Error('新密码不能与旧密码相同'))
                } else {
                    callback()
                }
            },
            trigger: 'blur'
        }
    ],
    newPwdp: [
        { required: true, message: '请确认新密码', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value !== tempChangePwd.value.newPwd) {
                    callback(new Error('两次输入的新密码不一致'))
                } else {
                    callback()
                }
            },
            trigger: 'blur'
        }
    ]
}

// 上传头像的请求url
const uploadUrl = ref('http://localhost:8081/user/avatar ')
// 用户id
const userid = ref(null)
// 用户头像
const imageFile = ref('')
/**
 * @description: 获取用户id
 * @Author: 梁晓雨
 * @Date: 2025-04-05 10:43:02
 */
const getUserid = () => {
    userid.value = store.getters.getUser.userId;

}
/**
 * @description: 获取用户头像
 * @Author: 梁晓雨
 * @Date: 2025-04-05 19:20:10
 */
const getUserInfo = async () => {
    try {
        await request.get(`/user/${userid.value}`)
            .then(res => {
                imageFile.value = res.data.userAvater;
                AccountForm.value.username = res.data.username;
                AccountForm.value.email = res.data.email;
            })
    } catch (error) {
        ElMessage({
            type: 'error',
            message: '头像获取失败'
        })
    }
}

/**
 * @description: 使修改用户名的弹窗变为显示
 * @Author: 梁晓雨
 * @Date: 2025-03-29 23:03:13
 */
const toEditUsernameStatus = () => {
    tempAccountForm.value = cloneDeep(AccountForm.value)
    usernameStatus.value = true
}
/**
 * @description: 使修改用户邮箱的弹窗变为显示
 * @Author: 梁晓雨
 * @Date: 2025-03-29 23:03:38
 */
const toEditEmailstatus = () => {
    tempAccountForm.value = cloneDeep(AccountForm.value)
    emailStatus.value = true
}
/**
 * @description: 使修改用户密码的弹窗变为显示
 * @Author: 梁晓雨
 * @Date: 2025-03-29 23:03:44
 */
const toEditPassword = () => {
    tempAccountForm.value = cloneDeep(AccountForm.value)
    passwordStatus.value = true
}
/**
 * @description: 使修改用户头像的弹窗变为显示
 * @Author: 梁晓雨
 * @Date: 2025-03-29 23:04:44
 */
const toEditAvaterStatus = () => {
    tempAccountForm.value = cloneDeep(AccountForm.value)
    avaterSrcStatus.value = true
}
/**
 * @description: 头像上传成功时
 * @Author: 梁晓雨
 * @Date: 2025-03-31 16:06:02
 */
const success = () => {
    getUserInfo();
    ElMessage({
        type: 'success',
        message: '上传成功'
    })
}
/**
 * @description: 头像上传前
 * @Author: 梁晓雨
 * @Date: 2025-03-31 16:06:16
 */
const beforeUpload = () => {
    ElMessage({
        type: 'info',
        message: '上传中'
    })
}

/**
 * @description:  修改用户名
 * @Author: 梁晓雨
 * @Date: 2025-04-05 21:58:48
 */
const onSubmitUsername = async () => {
    try {
        await request.put("/user/edit", {
            userid: userid.value,
            username: tempAccountForm.value.username
        })
        usernameStatus.value = false;
        ElMessage({
            type: 'success',
            message: '修改成功'
        })
        await getUserInfo();
    } catch (error) {
        ElMessage({
            type: 'error',
            message: '修改失败'
        })
    }

}
/**
 * @description: 取消修改用户名
 * @Author: 梁晓雨
 * @Date: 2025-04-05 21:59:11
 */
const cancelUsername = () => {
    usernameStatus.value = false;
}
/**
 * @description: //TODO 修改密码
 * @Author: 梁晓雨
 * @Date: 2025-04-05 22:01:41
 */
const onSubmitPwd = async () => {
    // await request.post("/user/editPwd",{

    // })
    await request.post('/user/editPwd', {
        userid: userid.value,
        oldPwd: tempChangePwd.value.oldPwd,
        newPwd: tempChangePwd.value.newPwd
    })
        .then(res => {
            if (res.message == "OK") {
                ElMessage({
                    type: 'success',
                    message: '修改成功'
                })
            } else {
                ElMessage({
                    type: 'error',
                    message: '修改失败'
                })
            }

        })
    tempChangePwd.value.oldPwd = '';
    tempChangePwd.value.newPwd = '';
    tempChangePwd.value.newPwdp = '';
    passwordStatus.value = false;
}
/**
 * @description: 取消修改密码
 * @Author: 梁晓雨
 * @Date: 2025-04-05 22:02:28
 */
const cancelPwd = () => {
    passwordStatus.value = false;
}
// 初始化执行
onMounted(
    () => {
        getUserid();
        getUserInfo();
    }
)
</script>
<style lang="scss" scoped>
@use './SettingAcctountPassword.scss';
</style>
